import React from 'react'
import style from './style'
import Button from '../button'
import Link from '../link'
import cx from 'classnames'

class TitleBar extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'TitleBar';
    this.state = {
      fixed: false,
    }
  }
  componentDidMount() {
    if(this.props.fixed){
      const {
        titleBar,
        titleItem,
      } = this.refs;
      const {
        top,
        left,
        right,
        bottom,
      } = titleBar.getBoundingClientRect();
      titleItem.style.position = 'fixed';
      titleItem.style.top = `${top}px`;
      titleItem.style.left = `${left}px`;
      titleItem.style.width = `${right-left}px`;
      titleItem.style.bottom = `${bottom - 10}px`;
      this.interval = setInterval(() => {
        const {
          titleBar,
          titleItem,
        } = this.refs;
        const {
          top,
        } = titleBar.getBoundingClientRect();
          this.setState({
            fixed: top < 20
          });
      }, 100);
    }
  }
  componentWillUnmount() {
    clearInterval(this.interval); 
  }

  render() {
    const { leftActions, actions, text, label, add, link, back, nav, children, className, fixed } = this.props;
    const event = {};
    if(fixed){
      event.onWheel=this.onWheel
    }
    return (
      <div className={style['layout']} ref={'titleBar'} >
        <div className={cx({
          [style.root]: true,
          [className]: className,
          [style['fixed']]: this.state.fixed,
        })} ref={'titleItem'}>
          <div className={style.title} >
            {
              back?
              <Link 
                onClick={() => {
                    if (typeof back == 'string') {
                      location.href = '#' + back //TODO: 改成标准 router
                    } else {
                      history.back()
                    }
                }}
                className={style.back} 
                iconRotate="90" 
                icon="arrow"
              />: null
            }
            <h1>{ label }</h1>
            {
              leftActions? (
                <div className={cx({
                  [style.actions]: true,
                  [style.leftActions]: true
                })}> 
                  {
                    leftActions.map((item, i) => {
                      if (typeof item === 'function') return item({ key: i, className: style.action })
                      const {label, handler, ...others} = item
                      return (
                        <Button 
                          className={style.action} 
                          label={label} 
                          onClick={handler} 
                          {...others} 
                          key={i}
                        />
                      )
                    })
                  }
                </div>
              ): null
            }
          </div>
          <div data-role="handle" className={style.actions}>
          {
            actions? (
              actions.map((item, i) => {
                if (typeof item === 'function') return item({ key: i, className: style.action })
                const { link, label, handler, ...others} = item
                if (link) {
                  return (
                    <Link 
                      key={i}
                      className={style.action}
                      label={label} 
                      onClick={handler} 
                      {...others}/>
                  )
                }
                return (
                  <Button 
                    className={style.action} 
                    label={label} 
                    onClick={handler} 
                    {...others} 
                    key={i}
                  />
                )
              })
            ): null
          }
          {
            add?
            <Button className={style.add} label={add.label} onClick={add.handler}/>: null
          }
          {
            link?
            <Link to={link.to} className={style.link} label={link.label}/>: null
          }
          {
            text?
            <p className={style.text}>{text}</p>: null
          }
          {
            children
          }
          </div>
          {
            nav?
            <ul>
              {
                nav.map((v, i)=> {
                  return (
                    <li
                      key={i}
                    >
                      <Link 
                        to={v.link} 
                        label={v.label}
                      />
                    </li>
                  )
                })
              }
            </ul>
            : null
          }
        </div>
      </div>
    );
  }
}

export default TitleBar;

